<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import mySelect from '@/components/Select/mySelect.vue'
import {actionConfig,type actionConfigType,type actionKeyType} from "./roleList"

const props = defineProps<{
	editNode: { [key: string]: any }
}>()


const authState = reactive({
	accessrequestIdList:[] as string[],
	actionList:[] as actionKeyType[]
})
const pageInnerAuthList = ref<any[]>([])
const actionAuthList=ref<actionConfigType[]>(actionConfig)
const formInstance = ref<FormInstance | null>(null)
const formLayout = {
	style: 'margin: 0 10px',
	labelWidth: 'auto',
	labelPosition: 'left',
}

const rules = {
	xxx: [{ required: true, message: '请输入xxx！', trigger: 'change' }],
}

function init() {
	const {requestList,accessRequestList,accessActionList}=props.editNode
       const _requestList=requestList.map((v:requestItem)=>{
				if(v.needAuth) return {label:`${v.requestName}（${v.description}）`,value:v.id}
				else return {label:`${v.requestName}（${v.description}） —— 无需分配即可访问`,value:v.id,disabled:true}
			 })
			 pageInnerAuthList.value=_requestList
      
       if(accessRequestList && accessRequestList.length) authState.accessrequestIdList=accessRequestList.map((v:requestItem)=>v.id)
       else authState.accessrequestIdList=[] 

			 if(accessActionList && accessActionList.length) authState.actionList=accessActionList.map((v:any)=>v.value)
			 else  authState.actionList=[]
}

function formCommit(): {
	accessRequestList:requestItem[]
	accessActionList:actionConfigType[]
} {
	const {requestList}=props.editNode
	 const requestListMap:Record<string,requestItem>={}
	 const actionListMap:Record<string,actionConfigType>={}
	 requestList.forEach((v:requestItem)=>{
		 requestListMap[v.id]=v
	 })
	 actionAuthList.value.forEach((v)=>{
		 actionListMap[v.value]=v
	 })
   const accessRequestList:requestItem[]=[]
	 const accessActionList:actionConfigType[]=[]
   authState.accessrequestIdList.forEach(v=>{
		   accessRequestList.push(requestListMap[v])
	 })
	 authState.actionList.forEach(v=>{
		   accessActionList.push(actionListMap[v])
	 })

	return JSON.parse(JSON.stringify({
		accessRequestList,
    accessActionList,
	}))
}

defineExpose({
	init,
	authState,
	formCommit,
})
</script>

<template>
	<el-form :model="authState" :rules="rules" v-bind="formLayout" ref="formInstance">
		<el-row :gutter="24">
			<el-col :span="24">
				<el-form-item prop="accessrequestIdList" label="接口权限">
					<my-select
						:select-options="pageInnerAuthList"
						v-model="authState.accessrequestIdList"
						style="width: 100%"
						multiple
						placeholder="请选择页面内可用的接口。后端可根据当前的请求路径和角色具备的接口列表来校验是否具有接口权限" 
						clearable
					/>
				</el-form-item>

				<el-form-item prop="actionList" label="按钮权限">
					<my-select
						:select-options="actionAuthList"
						v-model="authState.actionList"
						style="width: 100%"
						multiple
						placeholder="请选择页面内可执行的动作" 
						clearable
					/>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
